<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #app {
      border: 2px solid #f00;
      height: 200px;
    }
  </style>
</head>

<body>
  <h1>组件的实现方法</h1>
  // 1.0
  Vue.component() 全局组件 核心使用的是 Vue.extend() 方法 最后实现 Vue.options.components = {}; //全局组件和局部组件都放到 options下的components对象中

  Vue.extend 方法用于创建一个基于现有组件的子类组件
  创建一个组件构造器
  var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function() {
  return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
  };
  }
  });

  创建 Profile 实例，并挂载到一个元素上
  new Profile().$mount('#mount-point');

  //2.0
  Vue 中的组件的关系 父子关系 子组件需要继承 父组件 使用的是options配置项

  //3.0 Vue组件化的好处
  最大的好处 一个页面 如果是 使用vue 开发 是很多个小组件 当更新的时候，我们只需要更新某个组件。浏览器只需要解析部分html css等，来实现最小的局部更新，性能会更加的好。
  // 组件有哪些特性： 属性 样式 插槽


  //4.0 开始实现
  4.1 创建全局组件

  你好:下面是自定义的组件 vue2如何实现渲染的
  <div id="app">
    {{ firstName }}
    <my-button key="1">


  </div>



  <!-- 自己手撸vue2源码 -->
  <script src="dist/vue.js"></script>
  <script>
    //创建全局组件button1
    Vue.component('my-button', {
      template: `<div>
        <button>点我</button>
        <span>{{name}}</span>
        </div>`,
      data() {
        return {
          name: '我是全局组件'
        }
      },
      methods: {
        testGolbalComponent() {


        }
      }

    })
    const vm = new Vue({
      el: '#app',
      components: {
         'my-button': {
           template: `<div>我是内部局部组件</div>`
         }
      },
      data() {
        return {
          firstName: '张',
          lastName: '沐阳',


        }
      },

      methods: {
        testVue() {

        }
      }


    })




    // 自定义组件如果不进行处理 默认会被_c render函数当作 html标签
    //     ƒ anonymous(
    // ) {
    // with(this){return _c('div',
    //     {id:"app"}
    //     ,_v("你好:下面是自定义的组件vue2如何实现渲染的"),_c('my-button',
    //     undefined
    //     ,_v("ff")))}
    // } 




  </script>
</body>

</html>

<!-- 1创建全局组件:定义全局组件映射关系表 Vue.component()
2 Vue.extend 作用: 创建 子类，初始化子组件 ，继承父组中属性
3.1 创建组件的vNode  node/index.js
3.2 创建真实的dom (new vue.extend())
3 渲染组件 =》


标签的渲染  ==》  获取el==>vnode==>真实的dom

-->


